<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>系统设置</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../../../resources/lib/bui/css/dpl-min.css"
          th:href="@{/resources/lib/bui/css/dpl-min.css}"
          rel="stylesheet" />
    <link href="../../../../resources/lib/bui/css/bui-min.css"
          th:href="@{/resources/lib/bui/css/bui-min.css}"
          rel="stylesheet" />
    <script src="../../../../resources/lib/bui/js/jquery-1.8.1.min.js"
            th:src="@{/resources/lib/bui/js/jquery-1.8.1.min.js}"></script>
    <script src="../../../../resources/lib/imageCropper/imagecropper.min.js"
            th:src="@{/resources/lib/imageCropper/imagecropper.min.js}"></script>
    <script src="../../../../resources/lib/bui/js/bui-min.js"
            th:src="@{/resources/lib/bui/js/bui-min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.form.min.js"
            th:src="@{/resources/lib/jquery/jquery.form.min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.util.js"
            th:src="@{/resources/lib/jquery/jquery.util.js}"></script>
    <script src="../../../../resources/js/sps-js-util.js"
            th:src="@{/resources/js/sps-js-util.js}"></script>
    <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
    <script src="http://g.alicdn.com/bui/bui/1.1.8/config.js" data="true"></script>
</head>
<body style="padding: 10px;">
<div class="row" style="padding-top: 10px">
    <div class="span16">
        <!--<div class="panel panel-head-borded">-->
        <table>
            <tr style="text-align: center">
                <td style="padding-left: 10px;">
                    <form name="settingForm1" method="post" action="" id="settingForm1" class="form-horizontal">
                        <legend style="width:300px;">登录页面背景</legend>
                        <div class="demo-content">
                            <div class="row">
                                <div class="span8">
                                    <img id="viewImg" style="width: 200px;height: 110px;border: 1px solid #ccc;"
                                         src="../../../resources/nh/images/1.jpg" />
                                    <div class="row" >
                                        <div class="span4" style="padding-bottom: 30px;">
                                            <input id="viewFiles" name="viewFiles" type="file" accept="image/png,image/jpeg" style="display: none" />
                                        </div>
                                    </div>
                                    <button id="btn1" type="button" class="button">上传</button>
                                    <button id="del1" type="button" class="button">删除</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </td>
                <td style="padding-left: 10px">
                    <form name="settingForm2" method="post" action="" id="settingForm2" class="form-horizontal">
                        <legend style="width:300px;">登录框背景</legend>
                        <div class="demo-content">
                            <div class="row">
                                <div class="span8">
                                    <img id="viewImg2" style="width: 200px;height: 110px;border: 1px solid #ccc;"
                                         src="../../../resources/nh/images/2.jpg" />
                                    <div class="row" >
                                        <div class="span4" style="padding-bottom: 30px;">
                                            <input id="viewFiles2" name="viewFiles" text="" type="file" accept="image/png,image/jpeg" style="display: none" />
                                        </div>
                                    </div>
                                    <button id="btn2" type="button" class="button">上传</button>
                                    <button id="del2" type="button" class="button">删除</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </td>
                <td style="padding-left: 10px">
                    <form name="settingForm3" method="post" action="" id="settingForm3" class="form-horizontal">
                        <legend style="width:300px;">主页面背景</legend>
                        <div class="demo-content">
                            <div class="row">
                                <div class="span8">
                                    <img id="viewImg3" style="width: 200px;height: 110px;border: 1px solid #ccc;"
                                         src="../../../resources/nh/images/3.jpg" />
                                    <div class="row" >
                                        <div class="span4" style="padding-bottom: 30px;">
                                            <input id="viewFiles3" name="viewFiles" type="file" accept="image/png,image/jpeg" style="display: none" />
                                        </div>
                                    </div>
                                    <button id="btn3" type="button" class="button">上传</button>
                                    <button id="del3" type="button" class="button">删除</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </td>
            </tr>
            <tr style="text-align: center">
                <td style="padding-left: 10px;padding-top: 20px;">
                    <form name="settingForm4" method="post" action="" id="settingForm4" class="form-horizontal">
                        <legend style="width:300px;">标题图片</legend>
                        <div class="demo-content">
                            <div class="row">
                                <div class="span8">
                                    <img id="viewImg4" style="width: 200px;height: 110px;border: 1px solid #ccc;"
                                         src="../../../resources/nh/images/4.jpg" />
                                    <div class="row" >
                                        <div class="span4" style="padding-bottom: 30px;">
                                            <input id="viewFiles4" name="viewFiles" type="file" accept="image/png,image/jpeg" style="display: none" />
                                        </div>
                                    </div>
                                    <button id="btn4" type="button" class="button">上传</button>
                                    <button id="del4" type="button" class="button">删除</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </td>
                <td style="padding-left: 10px;padding-top: 20px;">
                    <form name="settingForm5" method="post" action="" id="settingForm5" class="form-horizontal">
                        <legend style="width:300px;">欢迎页背景</legend>
                        <div class="demo-content">
                            <div class="row">
                                <div class="span8">
                                    <img id="viewImg5" style="width: 200px;height: 110px;border: 1px solid #ccc;"
                                         src="../../../resources/nh/images/5.jpg" />
                                    <div class="row" >
                                        <div class="span4" style="padding-bottom: 30px;">
                                            <input id="viewFiles5" name="viewFiles" type="file" accept="image/png,image/jpeg" style="display: none" />
                                        </div>
                                    </div>
                                    <button id="btn5" type="button" class="button">上传</button>
                                    <button id="del5" type="button" class="button">删除</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </td>
            </tr>
            <!--</div>-->
        </table>
    </div>
</div>
<!-- script start-->
<script th:inline="javascript" type="text/javascript">
var Form = BUI.Form;
var List = BUI.List;

var BASE_URL = /*[[@{/}]]*/ '/';
$("#viewImg").attr({ src: "setting/png?photoName="+1});
$("#viewImg2").attr({ src: "setting/png?photoName="+2});
$("#viewImg3").attr({ src: "setting/png?photoName="+3});
$("#viewImg4").attr({ src: "setting/png?photoName="+4});
$("#viewImg5").attr({ src: "setting/png?photoName="+5});
$('#btn1').click(function(){
    var settingForm1 = $('#settingForm1')[0];
    if($("#viewImg").attr("src")=="setting/png?photoName=1"){
        BUI.Message.Alert('请重新选择图片！');
        return;
    }
    var formData = new FormData(settingForm1);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'setting/uploadPhoto?num=1', true);
    xhr.onload = function(e) {
        if(xhr.statusText=='OK'){
            BUI.Message.Alert('上传成功！');
        }
    };
    xhr.send(formData);
});

$('#btn2').click(function(){
    var settingForm2 = $('#settingForm2')[0];
    if($("#viewImg2").attr("src")=="setting/png?photoName=2"){
        BUI.Message.Alert('请重新选择图片！');
        return;
    }
    var formData = new FormData(settingForm2);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'setting/uploadPhoto?num=2', true);
    xhr.onload = function(e) {
        if(xhr.statusText=='OK'){
            BUI.Message.Alert('上传成功！');
        }
    };
    xhr.send(formData);
});

$('#btn3').click(function(){
    var settingForm3 = $('#settingForm3')[0];
    if($("#viewImg3").attr("src")=="setting/png?photoName=3"){
        BUI.Message.Alert('请重新选择图片！');
        return;
    }
    var formData = new FormData(settingForm3);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'setting/uploadPhoto?num=3', true);
    xhr.onload = function(e) {
        if(xhr.statusText=='OK'){
            BUI.Message.Alert('上传成功！');
        }
    };
    xhr.send(formData);
});

$('#btn4').click(function(){
    var settingForm4 = $('#settingForm4')[0];
    var formData = new FormData(settingForm4);
    if($("#viewImg4").attr("src")=="setting/png?photoName=4"){
        BUI.Message.Alert('请重新选择图片！');
        return;
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'setting/uploadPhoto?num=4', true);
    xhr.onload = function(e) {
        if(xhr.statusText=='OK'){
            BUI.Message.Alert('上传成功！');
        }
    };
    xhr.send(formData);
});

$('#btn5').click(function(){
    var settingForm5 = $('#settingForm5')[0];
    if($("#viewImg5").attr("src")=="setting/png?photoName=5"){
        BUI.Message.Alert('请重新选择图片！');
        return;
    }
    var formData = new FormData(settingForm5);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'setting/uploadPhoto?num=5', true);
    xhr.onload = function(e) {
        if(xhr.statusText=='OK'){
            BUI.Message.Alert('上传成功！');
        }
    };
    xhr.send(formData);

});

$('#del1').click(function(){
    $.post(BASE_URL+"nh/system/setting/delPhoto?num=1",function(data){
        if(data.ok){
            BUI.Message.Alert('删除成功！');
            $("#viewImg").attr({ src: "setting/png?photoName="+1});
        }else{
            BUI.Message.Alert('无法删除！');
        }
    })
});
$('#del2').click(function(){
    $.post(BASE_URL+"nh/system/setting/delPhoto?num=2",function(data){
        if(data.ok){
            BUI.Message.Alert('删除成功！');
            $("#viewImg2").attr({ src: "setting/png?photoName="+2});
        }else{
            BUI.Message.Alert('无法删除！');
        }
    })
});
$('#del3').click(function(){
    $.post(BASE_URL+"nh/system/setting/delPhoto?num=3",function(data){
        if(data.ok){
            BUI.Message.Alert('删除成功！');
            $("#viewImg3").attr({ src: "setting/png?photoName="+3});
        }else{
            BUI.Message.Alert('无法删除！');
        }
    })
});
$('#del4').click(function(){
    $.post(BASE_URL+"nh/system/setting/delPhoto?num=4",function(data){
        if(data.ok){
            BUI.Message.Alert('删除成功！');
            $("#viewImg4").attr({ src: "setting/png?photoName="+4});
        }else{
            BUI.Message.Alert('无法删除！');
        }
    })
});
$('#del5').click(function(){
    $.post(BASE_URL+"nh/system/setting/delPhoto?num=5",function(data){
        if(data.ok){
            BUI.Message.Alert('删除成功！');
            $("#viewImg5").attr({ src: "setting/png?photoName="+5});
        }else{
            BUI.Message.Alert('无法删除！');
        }
    })
});


// 文件上传实现
(function() {
    var viewImg = document.getElementById("viewImg");
    var viewImg2 = document.getElementById("viewImg2");
    var viewImg3 = document.getElementById("viewImg3");
    var viewImg4 = document.getElementById("viewImg4");
    var viewImg5 = document.getElementById("viewImg5");

    $(viewImg).click(function(){
        $('#viewFiles').click();
    });
    $(viewImg2).click(function(){
        $('#viewFiles2').click();
    });
    $(viewImg3).click(function(){
        $('#viewFiles3').click();
    });
    $(viewImg4).click(function(){
        $('#viewFiles4').click();
    });
    $(viewImg5).click(function(){
        $('#viewFiles5').click();
    });

    $('#viewFiles').change(function(){
        var reader = new FileReader();
        reader.onload = function( evt ){
            viewImg.src = evt.target.result;
        }
        reader.readAsDataURL(this.files[0]);
    });
    $('#viewFiles2').change(function(){
        var reader = new FileReader();
        reader.onload = function( evt ){
            viewImg2.src = evt.target.result;
        }
        reader.readAsDataURL(this.files[0]);
    });
    $('#viewFiles3').change(function(){
        var reader = new FileReader();
        reader.onload = function( evt ){
            viewImg3.src = evt.target.result;
        }
        reader.readAsDataURL(this.files[0]);
    });
    $('#viewFiles4').change(function(){
        var reader = new FileReader();
        reader.onload = function( evt ){
            viewImg4.src = evt.target.result;
        }
        reader.readAsDataURL(this.files[0]);
    });
    $('#viewFiles5').change(function(){
        var reader = new FileReader();
        reader.onload = function( evt ){
            viewImg5.src = evt.target.result;
        }
        reader.readAsDataURL(this.files[0]);
    });

})();



</script><!-- script end -->
</div>
</body>
</html>